<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    	body,html{
    		margin: 0;
    	}
    #container{
    	margin: 20px auto;
        /*width: 400px;
        height: 390px;*/
        width: 1366px;
        height: 768px;
        border: 1px solid blue;
        overflow: hidden;
       /*padding-bottom: -5px;*/
      padding-right:-10px ;
    }
    img{
    	display: inline-block;
        /*width: 100px;*/
        width: 105px;
        height: 80px;
        margin-top: -5px;
        margin-bottom: -1px;
    }
    </style>
</head>
<body>
    <div id="container"></div>
    <!--<img src="" alt="">-->
</body>
</html>
<script>
    var container = document.getElementById("container")
    var Url;
     container.ondrop = function(event){
     	container.innerHTML='';
         var imgs = document.createElement("img")
         var img = event.dataTransfer.files;
         console.log(img);
         	event.preventDefault();
         	event.stopPropagation();
         	Url=URL.createObjectURL(img[0]);
         imgs.src = Url;
         container.appendChild(imgs)
          var  timer=setInterval(a,15)
         //可以多次添加多个图片,并且一行一行依次排列
     }
     function a(){
     	var img1=document.querySelectorAll("img")
     	if(img1.length==130){clearInterval(timer)}
     	else{
     		
     	
     		var imgs = document.createElement("img")
     		container.appendChild(imgs)
     		imgs.src=Url;
     }
     	}
     

</script>